// @import "@/common/scss/color.scss";
$single:rpx;
$vh:vh;
@mixin basics($name,$property){
 @for $i from 1 through 20 {
	   
	  @if $name == hei {
		   .#{$name}-#{$i}{
		   		  #{$property}: $i * 10+$vh; 
		   } 
	   }@else if $name == wid {
		   .#{$name}-#{$i}{
		   		  #{$property}: $i * 5%; 
		   } 
	   }@else if $name == fz {
	       .#{$name}-#{$i}{
	   		  #{$property}: $i * 5+$single; 
	   }
	   }@else if $name == lh {
		 .#{$name}-#{$i}{
		 		  #{$property}: $i * 10+$single; 
		 }  
	   }@else if $name == fw {
		   @if $i <= 8 {
			  .#{$name}-#{$i}{
			  		  #{$property}: $i * 100; 
			  }   
		   }
		 
	   }@else{
	        .#{$name}t-#{$i}{
		   #{$property}-top: $i * 5+$single;
	   }
	     .#{$name}r-#{$i}{
	   	   #{$property}-right: $i * 5+$single;
	   }
	   .#{$name}b-#{$i}{
	   	   #{$property}-bottom: $i * 5+$single;
	   }
	   .#{$name}l-#{$i}{
	   	   #{$property}-left: $i * 5+$single;
	   }
	   .#{$name}y-#{$i}{
	   	   #{$property}: $i * 5+$single 0;
	   }
	   .#{$name}x-#{$i}{
		  #{$property}: 0 $i * 5+$single; 
	   }
	   .#{$name}xy-#{$i}{
		  #{$property}:$i * 5+$single; 
	   }
	   }
	   
	}

	
}

 @include basics(m,margin);  
 @include basics('p',padding);
 @include basics(fz,font-size);
 @include basics(hei,height);
 @include basics(wid,width);
 @include basics(lh,line-height);
 @include basics(fw,font-weight);

.u-show{
	display: none;
}
.po-f{
	position: fixed;
	
}
.po-a{
	position: absolute;
}
.po-r{
	position: relative;
}
.po-s{
	position: static;
}

.ta-c {
    text-align: center;
}
.ta-r {
    text-align: right;
}
.ta-l{
	text-align: left;
}
.flex{
	display: flex;
	flex-direction: row;
	 // flex-wrap:wrap; 

}
.j_sb{
	// 左右对齐
	 justify-content: space-between;
	  flex-wrap:wrap; 
}


